<template>
  <div>
    <el-row class="handleArea" type="flex" justify="space-between">
      <el-col :span="4">
        <el-button type="primary" @click="exportItems" icon="el-icon-download" size="medium"
          class="queryButton">选择导出</el-button>
      </el-col>
      <el-col :span="20">
        <el-form :model="conditionForm" class="conditionForm">
          <el-form-item label="时间:">
            <el-date-picker v-model="conditionForm.dateTimes" type="datetimerange" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" size="medium" />
          </el-form-item>
          <el-form-item label="账户:">
            <el-input v-model="conditionForm.account" placeholder="账户名称" clearable size="medium" class="inputNormal" />
          </el-form-item>
          <el-form-item label="物料编码:">
            <el-input v-model="conditionForm.materialCode" placeholder="物料编码" clearable size="medium"
              class="inputNormal" />
          </el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search" size="medium">查询</el-button>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="dataList" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <!-- <el-table-column prop="transactionProcessTime" label="事务处理时间" width="120">
        <template v-slot="scope">
          <span>{{ timeFormat(scope.row.transactionProcessTime, 'y2s') }}</span>
        </template>
      </el-table-column> -->
      <el-table-column v-for="(item) in engTh" :key="item" :label="formTh[`${item}`]" :prop="item">
        <!-- <template v-slot="scope">
          {{ handleItem(item, scope.row[`${item}`]) }}
        </template> -->
      </el-table-column>

      <!-- <el-table-column prop="account" label="账户" width="100" />
      <el-table-column prop="accountDesc" label="账户描述" />
      <el-table-column prop="materialCode" label="物料编码" width="100" />
      <el-table-column prop="materialDesc" label="物料描述" width="120" />
      <el-table-column prop="materialUnit" label="单位" width="100" />
      <el-table-column prop="amount" label="数量" width="100" />
      <el-table-column prop="unitCost" label="单位成本" width="100" />
      <el-table-column prop="totalCost" label="总成本" width="100" />
      <el-table-column prop="accountingType" label="会计类型" width="100" fixed="right">
        <template v-slot="scope">
          <span>{{ accountingTypeEnum[scope.row.accountingType] }}</span>
        </template>
      </el-table-column> -->

    </el-table>
  </div>
</template>

<script setup lang="ts">
import { JournalEntry2 } from "@/requests/request";
import { timeFormat } from "@/utils/time"
import { journalTableHeader, journalTableProps, purTableHeader } from "./data";
import { exportExcel, filterExcelContentArr } from "@/utils/excel";
import { onMounted, ref } from "vue";
// import { queryJournalEntriesByBusinessId } from "@/requests/api/purchase-receipt";
import { queryJournalByBusinessId } from "@/requests/api/transcation-query-service";

let selectedArr: Array<any> = []
const props = defineProps({
  dataList: Array<JournalEntry2>,
  engTh: Array<string | null>,
  businessId: { type: String, defalut: '0' }
});

const formTh = Object.assign(purTableHeader, journalTableHeader)
onMounted(() => {
  console.log('表格数据', props.dataList, '---', props.engTh, '+++', formTh)
})
const emit = defineEmits(['changeDataList'])
const handleSelectionChange = (val: any) => {
  console.log('选择的数据', val)
  selectedArr = val;
}
const exportItems = () => {
  const sheetArr = filterExcelContentArr(selectedArr, journalTableProps, journalTableHeader)
  console.log('过滤的值', sheetArr)
  exportExcel("会计分录明细.xlsx", sheetArr)
}
const conditionForm = ref({
  dateTimes: [],
  account: "",
  materialCode: ""
})
const onSubmit = async () => {
  const { dateTimes, account, materialCode } = conditionForm.value
  let startTime = ""
  let endTime = ""
  if (dateTimes && dateTimes.length > 0) {
    startTime = timeFormat(dateTimes[0], "y2s");
    endTime = timeFormat(dateTimes[1], "y2s");
  }
  let journalEntryResult = await queryJournalByBusinessId(props.businessId, { account, materialCode, startTime, endTime });
  // journalTable.value.dataList = journalEntryResult.data as any as never[];
  emit('changeDataList', journalEntryResult.data as any as never[])
}
// const handleItem = (key: any, value: any) => {
//   if (key === 'accountingType') {
//     return accountingTypeEnum[value]
//   } else {
//     return value
//   }
// }
</script>

<style lang="scss" scoped>
.handleArea {
  @include mrb8
}

.conditionForm {
  display: flex;
  justify-content: flex-end;

  .el-form-item {
    display: flex;
    @include mrl8
  }

  button {
    height: 40px;
    @include mrl8
  }
}
</style>